<template>
  <div class="login relative flex items-center">
    <div class="left">
      <div class="login-logo"></div>
      <div class="title">汇劳动智能后台系统</div>
      <div class="subheading left">创新 / 多维度劳动教育课程设计</div>
      <div class="subheading middle">便捷 / 课程管理及统计便捷</div>
      <div class="subheading right">持续 / 及时更新优化</div>
    </div>
    <div class="card-box">
      <!-- <Transition name=""> -->
      <template v-if="isStatus == 1">
        <Login />
      </template>
      <template v-else-if="isStatus == 2"> <Register /></template>
      <template v-else> <ForgotPassword /></template>
      <!-- </Transition> -->
    </div>
  </div>
</template>

<script setup>
import Login from "./Login";
import Register from "./Register";
import ForgotPassword from "./ForgotPassword";
import { storeToRefs } from "pinia";
import { useLoginStore } from "@/store/login/login";
const login = useLoginStore();
const { isStatus } = storeToRefs(login);
defineOptions({
  name: "LoginIndex",
});
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background: url("@/assets/img/login/login-bg.png") no-repeat center;
  background-size: 100% 100%;
  padding: 0 282px;
  justify-content: space-between;
  .left {
    .login-logo {
      position: absolute;
      left: 285px;
      top: 120px;
      width: 128px;
      height: 113px;
      background: url("@/assets/img/login/login-logo.png") no-repeat;
      background-size: 100% 100%;
    }
    .title {
      position: absolute;
      left: 280px;
      top: 260px;
      font-size: 58px;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 68px;
      background-image: -webkit-linear-gradient(
        top,
        rgba(64, 143, 255, 1),
        rgba(0, 82, 217, 1)
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .subheading {
      position: absolute;
      top: 345px;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 20.27px;
      color: rgba(153, 153, 153, 1);
      &.left {
        left: 280px;
      }
      &.middle {
        left: 540px;
      }
      &.right {
        left: 775px;
      }
    }
  }
  .card-box {
    width: 532px;
    height: 654px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 30px rgba(79, 79, 79, 0.1);
    z-index: 999;
  }
}
</style>
